<script setup>
import { reactive } from 'vue';
import { RouterLink, RouterView } from 'vue-router'
const menuList = reactive([{
            name: '首页',
            path: '/index',
            id:"shouye",
            icon:"HomeFilled"
        }, {

            name: '飙升榜',
            path: '/rank',

            id:"paiahngbang",
            icon:"Histogram"
        }, {
            name: '歌单',
            path: '/playlist',
            id:"gedan",
            icon:"Grid"
        }, {
            name: 'MV',
            path: '/mvlist',
            id:'MV',
            icon:"VideoPlay"
        }, {
            name: '歌手',
            path: '/artist',
            id:"geshou",
            icon:"Mic"
        }, {
            name: '我的音乐',
            path: '/my',
            id:"myyinyue",
            icon:"UserFilled"
        }]);


const handleOpen=()=>{}
const handleClose=()=>{}
</script>

<template>
    <el-menu
        default-active="shouye"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        
      >
      <div v-for="item in menuList" class="Mbox">
        <RouterLink :to="item.path">
            <el-menu-item v-if="!item.child"  :index="item.id">
                <el-icon>
                    <component :is="item.icon"></component>
                </el-icon>
                <span>{{ item.name }}</span>
            </el-menu-item>
            <el-sub-menu v-else index="1">
            <el-sub-menu index="1-4">
            </el-sub-menu>
            </el-sub-menu>
        </RouterLink>
      </div>
      
        
      </el-menu>
</template>

<style scoped>
.el-menu{
    width: 224px;
    margin-top: 30px;
}
.Mbox{
    margin-top: 20px;
}
.el-menu-item:hover {
    background-color: rgb(211, 209, 209);
    
}
</style>